<template>
    <div class="blackboard">
      <div class="time-counter">{{ time }}</div>
      <div class="letters">
          <div class="letter-item" v-for="(item, idx) in letters" :key="idx">{{ item }}</div>
      </div>
      <div class="tool-bar">
          <button class="btn btn-next" @click="next">切换</button>
      </div>  
    </div>
    
  </template>
  
  <script>
  const LETTERS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  export default {
    name: 'RandomLetter',
    data(){
      return {
        letters: LETTERS,
        
        time: 0
      }
    },
    mounted(){
      this.next();
    },
    methods:{
      next(){
        let items = LETTERS.sort(()=> Math.random() - 0.5);
        for(let i =0; i< items.length; i ++){
          items[i] = Math.random() > 0.5 ? items[i].toLowerCase() : items[i].toLowerCase()
        }
        if(this.interval){
          clearInterval(this.interval)
        }
        this.letters = items;
        this.time = 0;
        this.interval = setInterval(()=> {
          this.time ++;
        }, 1000)

      },
      generate(){
        
      }
    }
   
  }
  </script>
  
  <style scoped>
   .blackboard{
    background: rgb(4, 76, 64);
    width: 100%;
    min-height: 100%;
   }
   .time-counter{
    height:140px;
    line-height: 140px;
    color: brown;
    font-size: 140px;
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;

   }
   .letters{
    
    box-sizing: border-box;
    padding-top:80px;
    padding-bottom: 40px;
    padding: 0px 100px 20px;
    display: flex;
    flex-wrap: wrap;
 
   }

   .letter-item{
      font-family: 'PlaywriteGBS';
      font-weight: bold;
      line-height: 180px;
      color:rgb(230, 127, 48);
      font-size: 120px;
 
      width: 170px;
      text-align: center;
   }
    

    .tool-bar{
        margin: 50px auto;
    }
    .btn{
        border: none;
        background-color: #1890ff;
        color: #FFFFFF;
        padding: 10px 40px;
        line-height: 1.5;
        font-size: 30px;
        cursor: pointer;
    }
    
  </style>
  